<template>
  <div class="preview-image">
    <el-dialog  :visible.sync="editConfig.visible" :width="dialogWidth" :before-close="handleClose">
      <div class="content" style="position: relative;">
        <div class="dia_title">
          <p>{{editConfig.title}}</p>
          <div class="close-box">
            <el-image :src="closeUrl" class="img-right" @click.native="handleClose"></el-image>
          </div>
        </div>
        <div class="dia-label-con">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="标签名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="comment">
            <el-input
              v-model="form.comment"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="btn-box">
          <el-button class="btn-left" @click="handleClose">取消</el-button>
          <el-button
            type="primary"
            @click="onSubmit('form')"
            >确定</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  updateLabel,addLabel
} from "@/api/labelManagement/index"
export default {
  name: "AddLabelDialog",
  mixins: [],
  props: {
    editFormDialog: {
      type: Object,
      default: () => {
        return {
          title:"添加",
          visible: false,
          infomation: {
          },
        }
      }
    }
  },
  computed: {},
  data() {
    return {
      editConfig:this.editFormDialog,
      form:this.editFormDialog.infomation,
      dialogWidth: "39%",
      closeUrl: require("@/assets/img/close.png"),
      rules: {
        name: [{ required: true, message: "请输入", trigger:['blur','change'] }],
      }
    }
  },
  mounted(){
    this.form=this.editFormDialog.infomation
  },
  watch: {
    'editFormDialog.visible':function(){
      this.$nextTick(()=>{
        this.form=this.editFormDialog.infomation
        this.$refs.form.resetFields();
      })
    }
  },
  methods: {
    handleClose() {
      this.$refs.form.resetFields();
      this.editConfig.visible = false
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.form);
          let requestUrl =
            this.editConfig.title == "编辑"
              ? updateLabel
              : this.editConfig.title == "添加"
              ? addLabel
              : "";
          requestUrl(this.form).then((res) => {
            if (res.success) {
              this.$message.success( this.editConfig.title+'成功！');
              this.handleClose();
              this.$emit("saveClick");
            }
          });
        }
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.preview-image {
  width: 660px;
  height: 634px;
  color:#fff;
  .dialog-header {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #fff;
    height: 65px;
    background: #0a1a34;
  }
  .content {
    width: 660px;
    height: 634px;
    background-image: url("/public/panoramicData/pic_alert_bg.png");
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
    padding: 0 20px;
    position: relative;
    .dia_title{
      color:#fff;
      padding:10px 10px;
      font-size:28px;
      border-bottom:1px solid #fff;
      display:flex;
      justify-content: space-between;
      align-items: center;
      p{
        margin:0;
      }
      .el-image{
        display:block;
      }
      .close-box{
        margin-top:10px;
        .el-image{
          width:17px;
          height:17px;
          cursor:pointer;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.el-dialog{
  background: unset;
}
.el-dialog__header {
  padding: 0 20px;
  background: #0a1a34;
  border-bottom: 0px solid #e5e5e5;
}
.el-dialog__headerbtn {
  display: none;
}
.el-dialog__body {
  background: #0a1a34;
  width: 660px;
}
.dia-label-con{
  width:calc(100% - 60px);
  margin:80px auto;
  color:#fff;
  .el-input,input{
      background: #0A1A34 !important;
  }
  .el-input__inner {
        border: 1px solid rgba(255, 255, 255, 0.5);
        background: #0A1A34 !important;
        color:#fff;
      }
  .el-form-item__label{
    color:#fff;
  }
}
.btn-box{
  position:absolute;
  bottom:50px;
  right:60px;
  .btn-left{
    margin-right:20px;
  }
}
</style>
